<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付宝 - 网上支付 安全快速！</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Alibaba PuHuiTi", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.5;
        }

        /* 页面容器 */
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 头部 */
        header {
            background-color: #1676d2;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

        header h1 {
            font-size: 20px;
            font-weight: normal;
        }

        /* 主要内容 */
        .main-content {
            background-color: white;
            margin-top: 20px;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 支付标志 */
        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo img {
            height: 30px;
        }

        /* 订单信息 */
        .order-info {
            background-color: #f9f9f9;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .order-info h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }

        .order-details {
            display: flex;
            justify-content: space-between;
        }

        .order-details p {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .order-amount {
            font-size: 20px;
            font-weight: bold;
            color: #ff6600;
        }

        /* 支付方式 */
        .payment-methods {
            margin-bottom: 20px;
        }

        .payment-methods h3 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .payment-options {
            display: flex;
            gap: 10px;
        }

        .payment-option {
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 10px;
            cursor: pointer;
        }

        .payment-option.active {
            border-color: #1676d2;
        }

        .payment-option img {
            height: 20px;
        }

        /* 支付按钮 */
        .payment-button {
            text-align: center;
            margin-top: 20px;
        }

        .payment-button button {
            background-color: #ff6600;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 30px;
            font-size: 16px;
            cursor: pointer;
        }

        .payment-button button:hover {
            background-color: #e55c00;
        }

        /* 底部 */
        footer {
            text-align: center;
            margin-top: 20px;
            color: #999;
            font-size: 12px;
        }

        /* 安全信息 */
        .security-info {
            background-color: #f9f9f9;
            border-top: 1px solid #e5e5e5;
            padding: 15px;
            text-align: center;
            font-size: 12px;
            color: #666;
        }

        .security-info p {
            margin-bottom: 5px;
        }

        /* 支付结果加载 */
        .loading {
            text-align: center;
            padding: 20px;
            font-size: 14px;
            color: #666;
        }

        .loading i {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-top-color: #1676d2;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
            vertical-align: middle;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>支付宝 - 网上支付 安全快速！</h1>
        </header>

        <div class="main-content">
            <div class="logo">
                <img src="https://img.alipay.com/platform/labs/img/icon/pc/standard.png" alt="支付宝">
            </div>

            <div class="order-info">
                <h3>订单信息</h3>
                <div class="order-details">
                    <div class="order-left">
                        <p>商家：测试商家</p>
                        <p>订单号：{{ orderId }}</p>
                        <p>商品名称：{{ subjectName }}</p>
                        <p>订单金额：¥{{ totalAmount }}</p>
                    </div>
                    <div class="order-right">
                        <p class="order-amount">¥{{ totalAmount }}</p>
                        <p>请在10分钟内完成支付</p>
                    </div>
                </div>
            </div>

            <div class="payment-methods">
                <h3>选择支付方式</h3>
                <div class="payment-options">
                    <div class="payment-option active">
                        <img src="https://img.alipay.com/platform/labs/img/icon/pc/alipay.png" alt="支付宝">
                        <p>支付宝</p>
                    </div>
                    <div class="payment-option">
                        <img src="https://img.alipay.com/platform/labs/img/icon/pc/wechat.png" alt="微信支付">
                        <p>微信支付</p>
                    </div>
                    <div class="payment-option">
                        <img src="https://img.alipay.com/platform/labs/img/icon/pc/bank.png" alt="银行卡支付">
                        <p>银行卡支付</p>
                    </div>
                </div>
            </div>

            <div class="payment-button">
                <button id="submitPayment">确认支付</button>
            </div>

            <div class="security-info">
                <p>支付宝采用高标准安全技术，保障交易安全。</p>
                <p>交易全程加密，您的信息安全有保障。</p>
            </div>
        </div>

        <div class="loading" id="loading" style="display: none;">
            <i></i> 正在处理支付，请稍候...
        </div>

        <footer>
            <p>支付宝（中国）网络技术有限公司 © 1999-2025</p>
        </footer>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取 URL 中的参数
            const urlParams = new URLSearchParams(window.location.search);
            const orderId = urlParams.get('orderId');
            const subjectName = urlParams.get('subjectName');
            const totalAmount = urlParams.get('totalAmount');

            // 填充订单信息
            document.querySelector('[data-order-id]').textContent = orderId;
            document.querySelector('[data-subject-name]').textContent = subjectName;
            document.querySelector('[data-total-amount]').textContent = totalAmount;

            // 支付按钮点击事件
            document.getElementById('submitPayment').addEventListener('click', function() {
                document.getElementById('loading').style.display = 'block';
                this.style.display = 'none';

                // 模拟支付处理延迟
                setTimeout(function() {
                    alert('支付成功！');
                    // 这里可以添加支付成功的跳转逻辑
                    window.location.href = '支付成功页面URL';
                }, 2000);
            });
        });
    </script>
</body>
</html>